<!-- 我的粉丝 -->
<template>
    <view class="page" :style="{ '--color': color }">
        <status-bar :title="title ? title : '我的会员'"></status-bar>
        <!--  <view class="menuList" v-if="commission.length > 0">
            <view class="nav_top_box" :style="{ top: navHeight + System.statusBarHeight + 'px' }">
                  <view class="navlists" v-if="commission.length > 0" :class="navTab == 1 ? 'navAction thmeColor' : ''" @click="navclick(1, 0)">
                    <text>{{ level_name[0].name }}（{{ level_name[0].num }}）</text>
                </view>
                <view class="navlists" v-if="commission.length > 1" :class="navTab == 2 ? 'navAction thmeColor' : ''" @click="navclick(2, 1)">
                    <text>{{ level_name[1].name }}（{{ level_name[1].num }}）</text>
                </view>
                <view class="navlists" v-if="commission.length > 2" :class="navTab == 3 ? 'navAction thmeColor' : ''" @click="navclick(3, 2)">
                    <text>{{ level_name[2].name }}（{{ level_name[2].num }}）</text>
                </view>
                <view class="Advertising_article thmeBg thmeColor" :style="{ left: 33 * (navTab - 1) + '%' }"></view>
            </view>
        </view> -->
        <view class="type2" v-if="list && list.length > 0">
            <view class="item flex-box" v-for="(item, index) in list" :key="index">
                <image
                    class="friHead"
                    @error="item.v_headimg = ''"
                    :src="item.v_headimg ? item.v_headimg : staticUrl + '/images/jh_up/head.jpg'"
                    mode=""
                    @click.stop="toUrl(`Fandetails?down_v_id=${item.v_id}`)"
                ></image>
                <view class="flex">
                    <view class="row j-sb" @click.stop="toUrl(`Fandetails?down_v_id=${item.v_id}`)">
                        <view class="d-flex a-center">
                            <text class="name">{{ item.v_name }}</text>
                            <text class="id">（{{ item.v_tel }}）</text>
                        </view>
                        <text class="black size28">{{ item.vip_level }}</text>
                    </view>
                    <view class="time">{{ item.v_addtime }}</view>
                    <view v-if="item.special" class="numBox">
                        <view class="row f-wrap" v-if="item.special[0]">
                            <view class="num" @click="clicBtn(sItem)" v-for="(sItem, sIndex) in item.special[0]" :key="sIndex">{{ sItem.title }}:{{ sItem.val }}</view>
                        </view>
                        <view class="row f-wrap" v-if="item.special[1]">
                            <view class="num" @click="clicBtn(sItem)" v-for="(sItem, sIndex) in item.special[1]" :key="sIndex">{{ sItem.title }}:{{ sItem.val }}</view>
                        </view>
                    </view>
                    <view class="num-list flex-box" v-else>
                        <view class="num" @click.stop="toUrl(`selfShop?down_v_id=${item.v_id}`)">自购：{{ item.orders }}</view>
                        <view class="num" @click.stop="toUrl(`Fandetails?down_v_id=${item.v_id}`)">粉丝数：{{ item.members }}</view>
                        <view class="num" @click.stop="toUrl(`Scoredetail?down_v_id=${item.v_id}&Status=1`)">单量：{{ item.orders_num }}</view>
                        <view class="num" @click.stop="toUrl(`Scoredetail?down_v_id=${item.v_id}&Status=2`)">业绩：{{ item.cumulative_income }}</view>
                    </view>
                </view>
            </view>
        </view>
        <empty v-else type="1" cat="3" :msg="'你还没有该信息内容哟~'"></empty>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    var that;
    export default {
        data() {
            return {
                title: '',
                navTab: 1,
                staticUrl: this.staticUrl,
                toTop: false,
                brokerage_list: [],
                noData: false,

                commission: [],
                list: '',
                msg: '一',

                state: '', // 我的团队
                level_name: [],
                vid2: '',
                page: 1,
                pagecount: 10,
                showLevel: 1, //等级
                getMore: true
            };
        },

        onLoad(e) {
            console.log(e);
            let that = this;
            if (e.vid2) this.vid2 = e.vid2;
            if (e.state == 1) {
                that.title = '我的团队';
                that.state = e.state;
            }
            if (this.state == 1) {
                this.my_income_team();
            } else {
                this.my_income(this.showLevel);
            }
        },
        methods: {
            clicBtn(item) {
                if (!item.path) return;

                this.toUrl(item.path);
            },
            navclick(i, positions) {
                let that = this;
                if (positions == 0) {
                    that.msg = '一';
                }
                if (positions == 1) {
                    that.msg = '二';
                }
                if (positions == 2) {
                    that.msg = '三';
                }

                // that.list = that.commission[positions];
                this.showLevel = this.level_name[positions].showLevel;
                that.navTab = i;
                this.page = 1;
                this.getMore = true;
                this.$pop.pageScrollTo();
                this.my_income(this.showLevel);
            },

            //  我的会员
            my_income(showLevel) {
                let that = this;
                this.$showLoading('');
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/distribution_people_new',
                        data: {
                            vid2: this.vid2,
                            page: this.page,
                            pagecount: this.pagecount,
                            showLevel
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.errcode != 100) return this.Toast(res.msg);
                        const result = res.data;
                        that.commission = result;
                        if (res.level_name.length) that.level_name = res.level_name;

                        that.level_name.forEach((item) => {
                            if (item.showLevel == showLevel) {
                                const resultData = result[showLevel - 1] || [];
                                this.page == 1 ? (this.list = resultData) : (this.list = [...this.list, ...resultData]);
                            }
                        });
                        const resultData = result[showLevel - 1] || [];
                        if (resultData.length < this.pagecount) this.getMore = false;
                    });
            },

            //  我的团队
            my_income_team() {
                let that = this;
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/distribution_people_team'
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.Toast(res.msg);
                        this.commission = res.data || [];
                        const result = res.data;
                        if (result.length) this.list = result[0];
                    });
            }
        },
        computed: {
            ...mapState(['tabTitle', 'color', 'city', 'navHeight', 'System', 'share', 'vid'])
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            if (this.state != 1) this.my_income(this.showLevel);
        },
        onShareAppMessage(option) {
            return {
                title: this.share.title,
                desc: this.share.desc,
                path: '/pages/index/index?share_v_id=' + this.vid + '&pageType=99',
                imageUrl: this.share.imageUrl
            };
        }
    };
</script>

<style scoped lang="scss">
    .right {
        float: right;
    }

    .page {
        background-color: #f8f8f8;

        .nav_top_box {
            width: 100%;
            height: 80upx;
            background: #ffffff;
            line-height: 80upx;
            font-size: 28upx;
            color: #333333;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99;
            box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.1);

            .navlists {
                width: 33%;
                display: inline-block;
                text-align: center;
                color: #999999;
                font-size: 24upx;

                &.navAction {
                    position: relative;
                    font-weight: bold;
                    font-size: 40upx;
                    color: #222222;
                }
            }

            .Advertising_article {
                width: 30upx;
                height: 6upx;
                position: absolute;
                bottom: 0;
                transition: left 0.2s;
                border-radius: 6upx;
                background-color: #222222;
                transform: translateX(106rpx);
            }
        }

        // 样式二
        .type2 {
            padding: 20rpx;
            // padding-top: 100upx;

            .item {
                background-color: #ffffff;
                padding: 20rpx;
                border-radius: 8rpx;
                margin-bottom: 20rpx;

                .friHead {
                    border-radius: 50%;
                    height: 64rpx;
                    width: 64rpx;
                    margin-right: 20rpx;
                }

                .name {
                    font-size: 28rpx;
                    font-weight: bold;
                }

                .id {
                    font-size: 28rpx;
                    color: #999999;
                }

                .time {
                    color: #999999;
                    margin-top: 4rpx;
                }

                .numBox {
                    display: flex;
                    flex-wrap: wrap;
                    padding: 10rpx 20rpx;
                    margin-top: 20rpx;
                    background-color: #f5f5f5;
                    border-radius: 8rpx;
                    .num {
                        width: 50%;
                        height: 70rpx;
                        color: #333333;
                        font-size: 26rpx;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }
</style>
